<!--  -->
<template>
  <div>
    <el-input placeholder="请输入标签内容" v-model="input" clearable>
    </el-input>
    <el-row id="btn">
      <el-button type="primary" @click="show_label()">查询</el-button>
      <el-button type="primary" @click="dialogFormVisible = true"
        >增加</el-button
      >

      <el-dialog title="新建标签" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="标签名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标签topic" :label-width="formLabelWidth">
            <el-input v-model="form.topic" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标签class" :label-width="formLabelWidth">
            <el-input v-model="form.class" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标签conditions" :label-width="formLabelWidth" >
            <el-input v-model="form.conditions" autocomplete="off" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addTag">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
    <LabelTables id="table" :tableContent="tableResults" />
  </div>
</template>

<script>
import LabelTables from "@/components/TagManage/LabelTables";

export default {
  name: "Manage",
  data() {
    return {
      input: "",
      tableResults: [],
      dialogFormVisible: false,
      form: {
        name: "",
        topic: "",
        class: "",
        conditions: "",
      },
      formLabelWidth: "120px",
    };
  },

  components: {
    LabelTables: LabelTables,
  },

  methods: {
    show_label: function () {
      var query_content = this.$data.input;
      //send query
      this.$axios({
        url: "http://"+this.$config.server_ip+":5002/get_labels",
        method: "get",
        params: { label_name: query_content },
      }).then((res) => {
        console.log(res.data.results);
        console.log(this.input);
        this.tableResults = res.data.results;
      });
    },

    addTag() {
      this.$axios.post("http://"+this.$config.server_ip+":5002/addlabel", this.form);
      this.dialogFormVisible = false;
    },
  },

  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
#table {
  margin-top: 20px;
}

#btn {
  margin-top: 20px;
}
</style>
